<template>
  <div>
    <div style="margin: 10px 0">
      <el-input style="width: 200px" placeholder="请输入标题" suffix-icon="el-icon-search" v-model="name"></el-input>
      <el-button class="ml-5" type="primary" @click="selectByTitle">搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>

    <div style="margin: 10px 0">
      <el-button type="primary" @click="handleAdd">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
      <el-button type="danger" @click="delBatch">批量删除 <i class="el-icon-delete"></i></el-button>
    </div>

    <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="title" label="标题" width="140"></el-table-column>
      <el-table-column prop="state" label="状态"></el-table-column>
      <el-table-column prop="gmtCreate" label="发布时间" width="170"></el-table-column>
      <el-table-column prop="publishUser" label="发布人"></el-table-column>
      <el-table-column label="操作"  width="200" align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-more" circle @click="handleDetail(scope.row)"></el-button>
          <el-popconfirm
              class="ml-5"
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="red"
              title="您确定删除吗？"
              @confirm="del(scope.row.id)"
          >
            <el-button type="danger" icon="el-icon-delete" circle slot="reference"></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>


    <div style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <el-dialog title="通知公告" :visible.sync="dialogFormVisible" width="40%" >
      <el-form label-width="80px" size="small">
        <el-form-item label="标题">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <template>
            <el-radio v-model="form.type" label="3">普通公告</el-radio>
            <el-radio v-model="form.type" label="2">紧急公告</el-radio>
            <el-radio v-model="form.type" label="1">严重公告</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="内容">
          <el-input type="textarea" :rows="9" v-model="form.content" autocomplete="off" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog :visible.sync="dialogTableVisible">
    <el-descriptions :title="detail.title" direction="vertical" :column="4" border >
      <el-descriptions-item label="发布人">{{detail.publishUser}}</el-descriptions-item>
      <el-descriptions-item label="状态">{{detail.state}}</el-descriptions-item>
      <el-descriptions-item label="内容" >{{detail.content}}</el-descriptions-item>
      <el-descriptions-item label="备注">
        <el-tag size="small">{{detail.type}}</el-tag>
      </el-descriptions-item>
    </el-descriptions>
    </el-dialog>

  </div>

</template>


<script>
export default {
  name: "Notice",
  data() {
    return {
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 5,
      name: "",
      editor: "",
      cbs: "",
      other: "",
      form: {publishUser:''},
      roles: [],
      dialogFormVisible: false,
      dialogTableVisible:false,
      multipleSelection: [],
      detail:{}
    }
  },
  mounted() {
    this.load()
  },
  methods: {
    load() {
      //pageNum:页数
      //pageSize:每页显示
      let url="http://localhost:8080/notices";
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response)=>{
            let arr=response.data.data;
        for (let i = 0; i < arr.length; i++) {
            if (arr[i].state==1){
              arr[i].state='正常'
            }else {
              arr[i].state='禁用'
            }
        }
        this.tableData=arr;
      })



    },
    save() {
      let p=this.cookie.getCookie( "LoginName");
      let url="http://localhost:8080/notices/insert"
      this.form.publishUser=p;
      let notice=this.qs.stringify(this.form);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url,notice).then((response)=>{
        if (response.data.state==20000){
          this.$message.success("发布成功")
          this.dialogFormVisible = false;
          this.load();
        }else {
          this.$message.error(response.data.message)
        }
      })

    },
    handleAdd() {
      this.dialogFormVisible = true
      this.form = {}

    },
    handleEdit(row) {
      this.form = row
      this.dialogFormVisible = true
    },
    del(id) {
      let url="http://localhost:8080/notices/"+id+"/delete";
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url).then((response)=>{
        if (response.data.state==20000){
          this.$message.success("删除成功")
          this.load();
        }else {
          this.$message.error(response.data.message)
        }
      })
    },
    selectByTitle(){
      let url="http://localhost:8080/notices/selectByTitle?title="+this.name;
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response)=>{
        let arr=response.data.data;
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].state==1){
            arr[i].state='正常'
          }else {
            arr[i].state='禁用'
          }
        }
        this.tableData=response.data.data;
      })
    },
    reset() {
      this.name = ""
      this.load()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    delBatch() {
      let ids = this.multipleSelection.map(v => v.id)  // [{}, {}, {}] => [1,2,3]
      if(ids.length==0){
        this.$message.error("请选择删除数据")
        return;
      }
      let url="http://localhost:8080/notices/"+ids+"/deleteBatch";

      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url).then((response)=>{
        if (response.data.state==20000){
          this.$message.success("删除成功")
          this.load();
        }else {
          this.$message.error(response.data.message)
        }
      })
    },
    handleDetail(r){
      let url="http://localhost:8080/notices/selectById?id="+r.id;
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response)=>{
        let arr=response.data.data;
          if (arr.state==1){
            arr.state='正常'
          }else {
            arr.state='禁用'
          }
          if (arr.type==1){
            arr.type='严重公告'
          }else if (arr.type==2){
            arr.type='紧急公告'
          }else{
            arr.type='普通公告'
        }

        this.detail=arr;
        this.dialogTableVisible=true;
        this.tableData=response.data.data;
      })
    },

    handleSizeChange(pageSize) {
      console.log(pageSize)
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum)
      this.pageNum = pageNum
      this.load()
    },
  }
}
</script>

<style>
.headerBg {
  background: #eee!important;
}
</style>

